<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/layui/css/layui.css"/>
    <link href="/layui/css/modules/layer/default/layer.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/css/index.css"/>
</head>
<body class="main-body-admin">
<nav style="margin-top: 10px;">
    <select id="collegeId" onchange="showMajor()">
        <option value="DEFAULT"></option>
    </select>
    <select id="majorId" onchange="showClass()">
        <option value="DEFAULT"></option>
    </select>
    <button class="layui-btn" onclick="load()">导入</button>
    <button class="layui-btn" onclick="add()">新增</button>
    <button class="layui-btn" onclick="edit()">编辑</button>
    <button class="layui-btn layui-btn-danger" onclick="deleteRow()">删除</button>
    <input class="layui-input-inline" id="searchValue"/>
    <button class="layui-btn layui-btn-normal" onclick="search()">搜索</button>
</nav>
<table id="classGroup" lay-filter="test"></table>
<script src="/js/jquery.min.js"></script>
<script src="/js/config/server.js"></script>
<script src="/js/common/login.js"></script>
<script src="/js/common/upload.js"></script>
<script src="/layui/layui.all.js"></script>
<script>
  var table;
  var majorId;
  var collegeId;
  checkRole('admin');
  // 加载学院
  handlerGet('/rest/college/listTotal', 'admin', function (data) {
    data.data.forEach(function (item) {
      $("#collegeId").append('<option value="' + item.collegeId + '">' + item.name + '</option>');
    });
  },function (data) {
    layer.msg('加载学院失败，请检查网络'+data.responseText)
  });
  // 根据学院加载专业
  function showMajor() {
    collegeId = $("#collegeId").val();
    handlerGet('/rest/major/listTotalByCollege/'+collegeId, 'admin', function (data) {
      $("#majorId").html('<option value="DEFAULT"></option>');
      data.data.forEach(function (item) {
        $("#majorId").append('<option value="' + item.majorId + '">' + item.name + '</option>');
      });
    });
  }

  function showClass() {
    majorId = $("#majorId").val();
    if (majorId !== 'DEFAULT') {
      layui.use('table', function () {
        table = layui.table;
        table.render({
          elem: '#classGroup'
          , height: 515
          , url: host + '/rest/classGroup/listByMajor/' + majorId //数据接口
          , page: true //开启分页
          , limit: 15
          , limits: [15, 30, 45]
          , cols: [[ //表头
            {checkbox: true}
            , {field: 'groupId', title: 'ID', width: 160, sort: true}
            , {field: 'name', title: '班级名', width: 280}
          ]]
        });
      });
    }
  }

  function deleteRow() {
    var checkStatus = table.checkStatus('classGroup');
    layer.confirm('确认删除这些数据', {icon: 3, title: '提示'}, function (index) {
      var idList = '';
      checkStatus.data.forEach(function (item) {
        idList += item.groupId + delimiter_num;
      });
      handlerDelete('/rest/classGroup', 'admin', idList, function (data) {
        if (data.code === "0") {
          layer.msg("删除成功");
          reloadAll()
        }
      }, function (data) {
        console.log(data)
      });
      layer.close(index);
    });
  }

  function reloadAll() {
    layui.use('table', function () {
      var table = layui.table;
      table.reload('classGroup', {
        url: host + '/rest/classGroup/listByMajor/' + majorId
      });
    })
  }

  function updateValue(content, name, value) {
    return content.replace(name + '##VA', value)
  }

  function edit() {
    if ($("#majorId").val() === 'DEFAULT') {
      layer.msg('请选择具体的专业')
    } else {
      var checkStatus = table.checkStatus('classGroup');
      if (checkStatus.data.length !== 1) {
        layer.msg('请选择一条记录')
      } else {
        var content = $('#editData').html();
        handlerGet('/rest/classGroup/' + checkStatus.data[0].groupId, 'admin', function (data) {
          content = updateValue(content, 'name', data.data.name);
          tips(content, '编辑数据', function () {
            var mainData = {
              groupId: checkStatus.data[0].groupId,
              name: $("#name").val(),
              majorId: majorId
            };
            console.log(JSON.stringify(mainData));
            handlerPost('/rest/classGroup', 'admin', JSON.stringify(mainData), function (data) {
              reloadAll();
              layer.msg('配置保存成功')
            }, function (data) {
              layer.msg('保存失败')
            });
          });
        }, function (data) {
          layer.msg('发生错误' + data.msg);
        });
      }
    }
  }

  function add() {
    if ($("#majorId").val() === 'DEFAULT') {
      layer.msg('请选择具体的专业')
    } else {
      var content = $('#editData').html();
      content = updateValue(content, 'name', '');
      tips(content, '新增数据', function () {
        var mainData = {
          name: $("#name").val(),
          majorId: majorId
        };
        console.log(JSON.stringify(mainData));
        handlerPost('/rest/classGroup', 'admin', JSON.stringify(mainData), function (data) {
          reloadAll();
          layer.msg('配置保存成功')
        }, function (data) {
          layer.msg('保存失败')
        });
      });
    }
  }

  function tips(content, title, confirm) {
    layer.open({
      title: title
      , content: content
      , btnAlign: 'c'
      , resize: true
      , area: ['300px', '200px']
      , btn: ['确认', '取消']
      , yes: function (index, layero) {
        confirm();
      },
      cancel: function () {
      }
    });
  }

  function search() {
    if ($("#majorId").val() === 'DEFAULT') {
      layer.msg('请选择具体的专业')
    }else{
      var value = $("#searchValue").val();
      if (value === '' || value === ' ') {
        layer.msg('请输入查询参数');
        return;
      }
      layui.use('table', function () {
        var table = layui.table;
        table.reload('classGroup', {
          url: host + '/rest/classGroup/search/'+majorId+'?name=' + value + ''
          , where: {}
        });
      })
    }
  }

  function load() {
    layer.open({
      title: '从Excel导入'
      , content: $("#loadFromExcel").html()
      , btnAlign: 'c'
      , resize: true
      , area: ['500px', '160px']
      , btn: ['确认', '取消']
      , yes: function (index, layero) {
        uploadFile('admin', host + '/rest/classGroup/upload', function (file) {
          if (file.name.split(".xl").length > 1) {
            return 0;
          } else {
            layer.msg("文件格式不正确, 请重新选择文件");
            return 1;
          }
        });
      }
    });
  }
</script>
<script id="editData" type="text/html">
    <div id="Tips">
        <label for="name">班级名</label>
        <input name="name" type="text" id="name" value="name##VA" required/>
    </div>
</script>

<script id="loadFromExcel" type="text/html">
    <div>
        <input type="file" id="selectFile"/>
        <progress id="progressBar" value="0" max="100"></progress>
        <span id="percentage"></span>
    </div>
</script>
</body>
</html>